import React, {useState} from 'react';
import { forwardRef } from 'react';
import './index.scss';
import TitleBar from '../title-bar/title-bar';
import HeadBar from '../head-bar/head-bar';
import TableList from '../table-list/table-list';
import DroneManagement from '../drone-management/drone-management';
import CollaborativeDisposal from '../collaborative-disposal/collaborative-disposal';

export interface DepartmentData {
  department: string;
  task: string;
  count: number;
  unit?: string;
}

export interface CollaborativeLeftPageProps {
  // 容器样式
  width?: number;
  height?: number;
  backgroundColor?: string;
  borderRadius?: number;
  borderColor?: string;
  borderOpacity?: number;

  // 标题配置
  title?: string;
  titleFontSize?: number;
  titleColor?: string;
  titleFontFamily?: string;
  titleFontWeight?: number;
  titleLineHeight?: number;
  titleLetterSpacing?: number;
  titleBackground?: string;
  titleShadow?: string;

  // 英文副标题配置
  subtitle?: string;
  subtitleFontSize?: number;
  subtitleColor?: string;
  subtitleFontFamily?: string;
  subtitleFontWeight?: number;
  subtitleLineHeight?: number;
  subtitleLetterSpacing?: number;
  subtitleOpacity?: number;

  // 时间选择器配置
  timeSelectorIconPath?: string;
  timeSelectorWidth?: number;
  timeSelectorHeight?: number;
  timeSelectorBackgroundColor?: string;
  timeSelectorBorderColor?: string;
  timeSelectorText?: string;
  timeSelectorTextFontSize?: number;
  timeSelectorTextColor?: string;
  timeSelectorTextFontFamily?: string;
  timeSelectorTextFontWeight?: number;
  timeSelectorTextLineHeight?: number;
  timeSelectorTextLetterSpacing?: number;

  // 数据配置
  departments?: DepartmentData[];
  departmentSpacing?: number;
  departmentWidth?: number;
  departmentHeight?: number;
  columns?: number;

  // 部门名称配置
  departmentFontSize?: number;
  departmentColor?: string;
  departmentFontFamily?: string;
  departmentFontWeight?: number;
  departmentLineHeight?: number;
  departmentLetterSpacing?: number;

  // 任务名称配置
  taskFontSize?: number;
  taskColor?: string;
  taskFontFamily?: string;
  taskFontWeight?: number;
  taskLineHeight?: number;
  taskLetterSpacing?: number;

  // 数值配置
  countFontSize?: number;
  countColor?: string;
  countFontFamily?: string;
  countFontWeight?: number;
  countLineHeight?: number;
  countLetterSpacing?: number;
  countBackground?: string;

  // 单位配置
  unitFontSize?: number;
  unitColor?: string;
  unitFontFamily?: string;
  unitFontWeight?: number;
  unitLineHeight?: number;
  unitLetterSpacing?: number;

  // 布局配置
  layout?: 'grid' | 'flex';
  gap?: number;

  // 事件
  onDepartmentClick?: (department: DepartmentData, index: number) => void;
  onTimeSelectorClick?: () => void;
  onClick?: () => void;

  // 其他属性
  style?: React.CSSProperties;
  className?: string;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}


const CollaborativeLeftPage = forwardRef<HTMLDivElement, CollaborativeLeftPageProps>((props, ref) => {
  const {
    discoveryItems = [
      {
        title: '累计发现事件数量',
        value: '99',
        iconPath: 'http://localhost:8085/static/images/zonghezhifa/zhin-icon-bg.png',
        showProgress: false
      },
      {
        title: '已处理事件数量',
        value: '85',
        iconPath: 'http://localhost:8085/static/images/zonghezhifa/zhin-icon-bg.png',
        showProgress: true,
        progressValue: 85,
        progressColor: 'radial-gradient(241% 94% at 52% 97%, rgba(22,241,255,0.81) 0%, rgba(22,213,255,0.81) 11%, rgba(22,129,255,0) 84%)',
        progressBackground: 'transparent',
        progressBorderColor: 'linear-gradient(180deg, rgba(83, 176, 255, 0), rgba(190, 246, 254, 0.95))'
      },
      {
        title: '事件处理率',
        value: '85.9%',
        iconPath: 'http://localhost:8085/static/images/zonghezhifa/zhin-icon-bg.png',
        showProgress: false
      },
      {
        title: '今日新发现事件数',
        value: '12',
        iconPath: 'http://localhost:8085/static/images/zonghezhifa/zhin-icon-bg.png',
        showProgress: false
      },
      {
        title: '今日处理事件数',
        value: '8',
        iconPath: 'http://localhost:8085/static/images/zonghezhifa/zhin-icon-bg.png',
        showProgress: false
      }
    ],
    // 事件
    onDepartmentClick,
    onTimeSelectorClick,
    onClick,
    // 其他属性
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;
  const componentStyle: React.CSSProperties = {
    width: '500px',
    height: '1080px',
    ...style
  };
  const collaborativeDisposalClassName = [
    'collaborative-left-page',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={collaborativeDisposalClassName}
      style={componentStyle}
      {...otherProps}
    >
      <div className="top-wrap">
        <TitleBar title="智能发现" subtitle="Intelligent Discover" />
        <div className="content-wrap">
          <div className="data-area">
            {discoveryItems.map((item, index) => (
              <div
                key={index}
                className="item-wrap"
              >
                <div className="item-title">{item.title}</div>
                <div className="item-icon" style={{backgroundImage: `url(${item.iconPath})`}}>
                  <div className="value">{item.value}</div>
                </div>
              </div>
            ))}
          </div>
          <HeadBar title="事件信息统计" />
          <TableList tableHeight="330" />
        </div>
        <div className="bottom-line" />
      </div>
      <div className="bottom-wrap">
        <TitleBar title="无人机管理" subtitle="Drone Management" rightIcon="http://localhost:8085/static/images/zonghezhifa/plus-icon.png"/>
        <div className="content-wrap">
          <DroneManagement height="298" />
        </div>
        <div className="bottom-line" />
      </div>
    </div>
  );
});

CollaborativeLeftPage.displayName = 'CollaborativeLeftPage';

export default CollaborativeLeftPage;
